<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<title>Cursus</title>
	<link href="stijl.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="scroll.js"></script>
	<script type="text/javascript" src="js.js"></script>
</head>
<body>
	<div id="background"></div>
	<div id="dia0" class="dia">
		<div class="button"></div>
			<h1>The future of webdevelopment..</h1>
	</div>
	<div id="dia1" class="dia">
	<div class="button"></div>
		<h1>Inhoud</h1>
		<ul>
		    <li><h2>Introductie en uitleg<span style="margin-left: 50px">(9:00 - 9:15)</span></h2></li>
		    <li><h2>Web 3.0<span style="margin-left: 250px">(9:15 - 10:00</span>)</h2></li>
		    <li><h2>HTML 5<span style="margin-left: 265px">(10:00 - 11:00)</span></h2></li>
		    <li><h3>Pauze<span style="margin-left: 315px">(11:00 - 11:30)</span></h3></li>
		    <li><h2>CSS 3<span style="margin-left: 290px">(11:30 - 12:30)</span></h2></li>
		</ul>
	</div>
	<div id="dia2" class="dia">
		<div class="button"></div>
		<h1>Geschiedenis van het web</h1>	
			<ul>
				<li>
					<h2>Web 1.0</h2>
					<ul>
						<li>Read-only content en statische websites</li>
						<li>Slechts 10% vindbaar</li>
						<li>Geocities, Hotmail, eBay, Google, AltaVista en Amazon</li>
					</ul>
				</li>
				<li>
					<h2>Web 2.0</h2>
					<ul>
						<li>User-generated content</li>
						<li>Steeds meer read-write i.p.v. read-only</li>
						<li>Uploaden van content naar websites</li>
						<li>Wikipedia</li>
						<li>Delicious, Facebook, Hyves en Twitter</li>
					</ul>
				</li>
			</ul>
	</div>
	<div id="dia3" class="dia">
		<div class="button"></div>
		<h1>Wat is Web 3.0</h1>	
			<ul>
				<li>
					<h2>Semantisch web</h2>
					<ul>
						<li>Web van entiteiten vs. web van documenten</li>
						<li>Betekenis geven aan entiteiten</li>
						<li>Semantiek en syntax</li>
					</ul>
				</li>
				<li><h2>Paris Hilton</h2></li>
				<li><h2>Max houdt van Lieke</h2></li>
				<li><h2>Het semantisch web geeft betekenis aan entiteiten in webpagina's en relaties tussen entiteiten.</h2></li>
			</ul>
		<img src='img/maxlieke.png' class="alterimgcss"></img>
	</div>
	<div id="dia4" class="dia">
		<div class="button"></div>
		<h1>Ontwikkeling van het web</h1>
		<h2>
			<ul>
				<li>sept 2008 t/m maart 2009</li>
			</ul>
		</h2>
		<img src='img/web.png' class="imgweb" style="margin-top: 150px; margin-right: 440px"></img>
	</div>
	<div id="dia4.5" class="dia">
		<div class="button"></div>
		<h1>Semantisch zoeken</h1>
		<ul>
			<li><a href="http://www.wolframalpha.com">http://www.wolframalpha.com</a></li>
			<li><h2>Paris Hilton</h2>
			<ul>
			    <li>Alleen persoon</li>
			</ul>
			</li>
			<li><h2>Hilton Hotel in Paris</h2>
			<ul>
			    <li>Persoon, stad en hotel</li>
			</ul>
			</li>
			<li><h2>Population France Germany</h2></li>
			<li><h2>How big is the earth</h2></li>
		</ul>
	</div>
	<div id="dia4" class="dia">
		<div class="button"></div>
		<h1>html5</h1>
        <ul>
	        	<li><h2>Geschiedenis HTML</h2></li>
	        	<li><h2>Waarom HTML5?</h2></li>
	        	<li><h2>Veranderingen</h2></li>                        
	            <li><h2>Demonstratie</h2></li>
        </ul>
	</div>    
	<div id="dia5" class="dia">
		<div class="button"></div>
		<h1>Geschiedenis</h1>
        <ul>
        	<!--<li>Wat is HTML?
            	<ul>
                	<li><h3>HyperText Markup Language</h3></li>
                </ul>
            </li>-->
	            <li><h2>HTML1.0 tot HTML 4.01</h2></li>
	            <li><h2>XHTML1.0</h2></li>
	            <li><h2>XHTML2.0</h2></li>
	            <li><h2>Oprichten WHATWG</h2></li>
	            <li><h2>WHATWG?</h2></li>
                <ul>
                    <li>Web Hypertext Application Technology Working Group</li>
                </ul>
            
        </ul>
	</div>
	<div id="dia6" class="dia">
		<div class="button"></div>
        <h1>Waarom html5</h1>
        <ul>
	            <li><h2>Multimedia</h2></li>
	            <li><h2>Opbouw & Structuur</h2></li>
	            <li><h2>SEO</h2></li>
            <ul>
            	<li>Search Engine Optimalization</li>
            </ul>
        </ul>        
	</div>    
	<div id="dia7" class="dia">
		<div class="button"></div>
		<h1>Veranderingen tov html4</h1>
        <ul>
	        	<li><h2>GeoLocation</h2></li>
                <ul>
                	<li><a href="http://htmlfive.appspot.com/static/whereami.html">Voorbeeld</a></li>
                </ul>
                <li><h2>Formulieren</h2></li>
                <ul>
                	<li>Voorbeeld: <br />
                        <img src="img/form_val.jpg" onClick="showPopup(this)"/>
                        <div class="mogelijkheid" style="margin-top:-400px; height:400px; width:400px;">
                            <div class="popup" >
                                <img src="img/form_code.JPG"></img>
                            </div>
                         </div>                        
                    </li>
                </ul>
        </ul>
	</div>   
	<div id="dia8" class="dia">
		<div class="button"></div>
        <h1>Demonstratie</h1>
        <ul>
	        	<li><h2>Oude situatie / nieuwe situatie</h2></li>
	            <li><h2>Demo's</h2>
            	<ul>
                	<li>Pagina structuur</li>
                	<li>Audio</li>
                    <li>Video</li>
                    <li>Canvas (live demo)</li>
                    <li>Drag 'n Drop (live demo)</li>
                </ul>
            </li>
        </ul>
	</div>
    <div id="dia9" class="dia">
    	<div class="button"></div>
        <h1>Pagina structuur</h1>
        <div id="pageStructure4" style="float:left; width:400px;">
        	<h4>Pagina structuur HTML 4.01</h4>
        	<img src="img/pagestructure.png" onClick="showPopup(this)">
            <div class="mogelijkheid" style="margin-top:-400px; height:400px; width:400px;">
                <div class="popup" >
					<img src="img/html4pagestructurecode.png"></img>
                </div>
             </div>
		</div>
        <div id="pageStructure5" style="float:left;">
        <h4>Pagina structuur HTML 5</h4>
        	<img src="img/pagestructure.png" onClick="showPopup(this)">
            <div class="mogelijkheid" style="margin-top:-400px; height:400px; width:400px;">
                <div class="popup">
					<img src="img/html5pagestructurecode.png"></img>
                </div>
             </div>
        </div>
    </div>
    <div id="dia10" class="dia">
    	<div class="button"></div>
    	<h1>Audio</h1>
        <ul>
        	<li><h2>Oude situatie</h2>
            	<ul>
                	<li>Gebruik maken van flash</li>
                </ul>
            </li>
            <li><h2>Nieuwe situatie</h2>
            	<ul>
                	<li>Audio element</li>
                	<li><audio src="mp3.mp3" controls></audio></li>
                	<div class="mogelijkheid" style="margin-left:30px;">
                			<div class="popup">
								<img src="img/audiocode.png"></img>
                			</div>
             			</div>
                    <li onClick="showPopup(this)">Code
                    </li>
                    <li><img src="img/audiocodec.png"></img></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="dia11" class="dia">
    	<div class="button"></div>
        <h1>Video</h1>
        <ul>
        	<li><h2>Oude situatie</h2>
            	<ul>
                	<li>Gebruik maken van flash</li>
                </ul>
            </li>
            <li><h2>Nieuwe situatie</h2>
            	<ul>
                	<li style="margin-top:-40px;"><video controls style="height:200px; width:200px;">
                    								<source src="http://media.w3.org/2009/02/ThisisCo1961_tiny.mp4" type="video/mp4">
                    							  </video>
                    </li>
            			<div class="mogelijkheid" style="margin-left:30px;">
                            <div class="popup" style="margin-top:-80px;">
                                <img src="img/videocode.png"></img>
                            </div>
                        </div>
            		<li onClick="showPopup(this)">Code</li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="dia12" class="dia">
    	<div class="button"></div>
        <h1>Canvas</h1>
        <ul>
        	<li><h2>Oude situatie</h2>
            	<ul>
                	<li>Gebruik maken van flash</li>
                </ul>
            </li>
            <li><h2>Nieuwe situatie</h2>
            	<ul>
                	<li>Canvas element</li>
                    <li>Live demo</li>
                    <li><img src="img/canvasdemo.png"></img></li>
                    <li><a href="http://9elements.com/io/projects/html5/canvas/">Meer mogelijkheden</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <div id="dia13" class="dia">
    	<div class="button"></div>
        <h1>Drag and Drop</h1>
        <ul>
        	<li><h2>Oude situatie</h2>
            	<ul>
                	<li>Framework gebruiken</li>
                    <li>Veel javascript code</li>
                </ul>
            </li>
            <li><h2>Nieuw situatie</h2>
            	<ul>
                	<li>Nieuwe Drag 'n Drop API</li>
                    <li>Live demo</li>
                </ul>
            </li>
    </div>
	<div id="dia14" class="dia">
		<div class="button"></div>
		<h1>CSS</h1>
		<ul style="font-size:40px;">
			<h2>
			<li>Wat is CSS ?</li>
			<li>Historie</li>
			<li>Waarom CSS 3 ?</li>
			</h2>
		</ul>
		<img src='img/css.png' class="imgcss" style=""></img>
	</div>
	<div id="dia14.5" class="dia">
		<div class="button"></div>
		<h1>Mogelijkheden CSS2</h1>
		<ul>
			<li><h2>Javascript libraries</h2>
			<ul>				
				<li>jQuery</li>
				<li>Script.aculo.us</li>
			</ul>
			</li>
			<li><h2>Flash</h2></li>
			<li><h2>Performance</h2>
				<ul>
					<li><a href="font-face(css2).html">CSS2 Font voorbeeld</a></li>
					<li><a href="font-face.html">CSS3 Font voorbeeld</a></li>
				</ul>
			</li>
		</ul>
	</div>
	<div id="dia15" class="dia">
		<div class="button"></div>
		<h1>Nieuwe Mogelijkheden</h1>
		<div class="mogelijkheid">
			<div class="popup">
				<pre style="font-size: 14px;">
@font-face{ 
	font-family: File; 
	src: local("File"), url(File.otf) format('opentype'); 
}
#web-fonts{
	font-family: File,Verdana,sans-serif;
}
				</pre>
			</div>
			<div class="test" id="web-fonts"  onclick="showPopup(this)"></div>
		</div>
		<div class="mogelijkheid" id="selectors">
			<div class="popup">
				<div id="content">
					<p title="house">Title = house</p>
					<p title="mouse">Title = mouse</p>
					<p title="hot">Title = hot</p>
					<p title="boss">Title = boss</p>
					<p title="contact">Title = contact</p>
				</div>
				<pre>
#selectors p[title^="ho"] {background: green;}
#selectors p[title$="t"] {background: blue;}
#selectors p[title*="ss"] {background: yellow;}
				</pre>
			</div>
			<div class="test" id="selectors" style="width: 200px;" onClick="showPopup(this)">
				Selectors
			</div>
		</div>
		
		<div class="mogelijkheid">
			<div class="popup">
				<img src="img/button.png"></img>
				<pre>
.button
{
	background-size: 60px 60px; 
} 
	</pre>
			</div>
			<div class="test" id="background-size" onClick="showPopup(this)">
				<span>Background-size</span>
			</div>
		</div>
		<div class="mogelijkheid" style="float:left;width:200px;">
			<div class="popup">
				<pre style="font-size: 14px;">
#rotate{
	transform: rotate(77deg);
}
				</pre>
			</div>
			<div class="test" id="rotate" onClick="showPopup(this)">Rotate</div>
		</div>
		<div class="mogelijkheid" style="float:left;width:200px;">
			<div class="popup">
				<pre style="font-size: 14px;">
#scale{
	transform: scale(2);
}
				</pre>
			</div>
			<div class="test" id="normal">Normal</div>
			<div class="test" id="scale" onClick="showPopup(this)">Scale</div>
		</div>
		<div class="mogelijkheid" style="float:left;">
			<div class="popup">
				<pre style="font-size: 14px;">
#skew{
	transform: skew(22deg);
}
				</pre>
			</div>
			<div class="test" id="skew" onClick="showPopup(this)">Skew</div>
		</div>
		<div class="mogelijkheid" style="float:left;width:50px;">
			<div class="popup">
				<pre style="font-size: 14px;">
#matrix{
	transform: matrix(1, -0.2, 0, 1, 0, 0);
}
				</pre>
			</div>
			<div class="test" id="matrix" onClick="showPopup(this)">Matrix</div>
		</div>
		<div class="mogelijkheid" style="float:left;">
			<div class="popup">
				<pre style="font-size: 14px;">
#translate{
	transform: translate(30px, 30px);
}
				</pre>
			</div>
			<div class="test" id="normal">Normal</div>
			<div class="test" id="translate" onClick="showPopup(this)">Translate</div>
		</div>
		<div class="mogelijkheid"  style="position:absolute; right: 1px; bottom: 1px;">
			<div class="popup" style="left: -400px;">
			<pre>
.dia{
	background: url("img/right.png") bottom right no-repeat,
		    url("img/logo.png") top left no-repeat;
}
	</pre> 
			</div>
			<div class="test" id="multiple-backgrounds"  style="background: none; border: none; width: 190px; height: 200px;" onClick="showPopup(this)">
			</div>
		</div>
	</div>
	<div id="dia16" class="dia">
		<div class="button"></div>
<a style="padding-top:60px;" href="radius_css2.html" >Ronde hoeken CSS 2</a>
		<div class="mogelijkheid" style="margin-top:50px;">
			
			<div class="popup">
				<pre style="font-size: 14px;">
#textshadow
{
	text-shadow: 1px 1px 3px #000;
}
				</pre>
			</div>
			<div class="test" id="textshadow" onClick="showPopup(this)">Text-Shadow</div>
		</div>
		<div class="mogelijkheid">
			<div class="popup">
	<pre style="font-size: 14px;">
div#textoverflow
{
	text-overflow: ellipsis;
	overflow:hidden;
}

div#textoverflow:hover {
	text-overflow: inherit;
	overflow: inherit;
}
		</pre>
			</div>
			<div class="test" id="textoverflow"  onclick="showPopup(this)">
				<nobr>Text Overflow en dit laat hij niet zien als het goed is</nobr>
			</div>
		</div>
		<div class="mogelijkheid">
			<div class="popup">
				<h5>Rounded Corners</h5>
				<pre style="font-size: 14px;">
.dia {
	border-radius: 15px;
}
				</pre>
				<h5>Box-shadow</h5>
				<pre style="font-size: 14px;">
.dia {
	box-shadow: 10px 10px 15px grey;
}
				</pre>
			</div>
			<div class="test" id="rounded"  onclick="showPopup(this)"></div>
		</div>
		<div class="mogelijkheid">
			<div class="popup">
				<pre style="font-size: 14px;">
.resize {
	overflow: hidden;
	resize:both;
}
				</pre>
			</div>
			<div class="test" id="resize" style="max-width: 700px; max-height: 200px;" onClick="showPopup(this)"> CSS 3 RESIZE: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
		</div>
		<div class="mogelijkheid">
			<div class="popup" style="top:100px;">
				<div id="columns">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eleifend massa. Praesent sodales purus non mauris gravida molestie. Etiam ornare urna vitae neque mattis accumsan commodo odio pulvinar. Morbi posuere, urna at facilisis congue, risus ipsum interdum odio, nec blandit nibh mauris eget odio. Maecenas luctus est non ante congue consectetur. Aenean tincidunt faucibus justo, a tempus arcu adipiscing et. Mauris consectetur, velit ac dignissim adipiscing, tellus orci ullamcorper risus, vitae vulputate felis ligula ac nibh. Nullam adipiscing, quam nec ullamcorper accumsan, urna massa tincidunt est, et faucibus massa augue at libero. Quisque feugiat, ipsum sit amet consequat iaculis, orci erat pellentesque lorem, sed convallis neque dui ut leo. Phasellus consequat arcu a ipsum ultricies in fermentum enim ornare.
					</p>
				</div>
				<pre style="font-size: 14px;">
.multi-column {
	column-count: 2;
	column-gap: 20px;
}
				</pre>
			</div>
			<div class="test" id="multi-column" onClick="showPopup(this)"> Multi-column</div>
		</div>
	</div>
	<div id="dia17" class="dia">
		<div class="button"></div>
		<h1>Animations of transitions</h1>
		<div class="mogelijkheid">
			<div class="popup" id="pulse" style="width: 600px;">
				<div id="pulseknop" style="margin-left: 40px; width: 520px; height: 80px; background: url(img/pulse.png)"></div>
				<pre>
#pulseknop
{
	transition: opacity 0.2s linear;
	opacity: 0.75;
}

@-webkit-keyframes pulse {
  from {
    transform: scale(1.0);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.2);
    opacity: 1.0;
  }
  to { 
    transform: scale(1.0);
    opacity: 0.75;
  }
}

#pulseknop:hover { 
  animation-name: pulse; 
  animation-duration: 0.5s; 
  animation-iteration-count: 10; 
}
				</pre>
			</div>
			<div class="test" id="trans_example1" style="width: 200px;" onClick="showPopup(this)">Example 1</div>
		</div>
		<div class="mogelijkheid">
			<div class="popup" style="top: -20px;">
				<div id="rocketboard">
					<div class="rocket">
						<img src="img/rocket.gif" width="92" height="215" alt="rocket animation"></img>
					</div>
				</div>
				<pre>
#rocketboard:hover .rocket
{
	transform: translate(700px, -250px);
}
#rocketboard:hover .rocket img
{
	transform: rotate(45deg);
}
#rocketboard .rocket
{
	transition: -webkit-transform 3s ease-in;
	bottom: 10px;
	left: 20px;
	position: absolute;
	display: block;
}
#rocketboard .rocket img
{
	transition: all 2s ease-in-out;	
	display: inline;
}
				</pre>
			</div>
			<div class="test" id="trans_example2" style="width: 200px;" onClick="showPopup(this)">Example 2</div>
		</div>
		<div class="mogelijkheid">
			<div class="popup" id="vakbord">
				<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
				<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
				<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
				<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
				<div></div><div></div> 
			</div>
			<div class="test" id="trans_example3" style="width: 200px;" onClick="showPopup(this)">Example 3</div>
		</div>
		<div class="mogelijkheid">
			<div class="test" id="demo" style="width: 200px;"><a href="demo/demo.html" >Demo</a></div>
		</div>
		
	</div>
	<div id="dia18" class="dia">
		<div class="button"></div>
		<h1>Browser Compatibility</h1>
		<div class="mogelijkheid">
			<div class="popup" style="top:10px;">
				<img src="img/comp_table.png" class="comp_table"></img>
			</div>
		</div>
		<ul>
			<li><h2>Internet Explorer</h2></li>
			<li><h2>Opera</h2></li>
			<li><h2>Firefox</h2></li>
			<li><h2>Safari</h2></li>
			<li><h2>Google Chrome</h2></li>
			
		</ul>
		<div class="test" id="browser_comp" style="background:none;border:none;" onClick="showPopup(this)">
			<img src="img/browsers.png" class="imgcomp" style="height: 200px;"></img>
		</div>
	</div>
	<div id="dia19" class="dia">
		<div class="button"></div>
		<h1>Afsluiting</h1>
		<h2>Good luck with the future of web development!</h2>
		Tom Somerville<br/>
		Roy Rutten<br/>
		Gerard Peters<br/>
		Rob Lohmann<br/>
		Rick Oonk<br/>
	</div>
</body>
</html>